<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!--v-bind 数据只能从data流向页面 -->
  <!-- 数据双向绑定:数据既能从js流向页面 也能从页面流向js -->
  <div id="app">
    <input type="text" v-model="selected">
    <p>{{ipt}}</p>
    <button @click="ipt++">v-on事件绑定</button>
    <!-- 单个复选框，绑定到布尔值 -->
    <p>请选择你喜欢的动漫</p>
    <input type="checkbox" v-model="checked">海贼王
    <!-- v-show控制元素的显示和隐藏 简单的切换元素的display -->
    <p v-show="checked">哎哟不错喔</p>
    <!-- 复选框中的使用 多个复选框 绑定到同一个数组 -->
    <p>请选择你喜欢的电影</p>
    <input type="checkbox" value="捌佰" v-model="checkName">捌佰
    <input type="checkbox" value="肖申克的救赎" v-model="checkName">肖申克的救赎
    <input type="checkbox" value="上海堡垒" v-model="checkName">上海堡垒
    <p v-show="checkName">{{checkName}}</p>
    <!-- 在单选框中的使用 -->
    <p>选择你最喜欢的明星</p>
    <input type="radio" value="肖战" v-model="star">肖战
    <input type="radio" value="蔡徐坤" v-model="star">蔡徐坤
    <input type="radio" value="吴亦凡" v-model="star">吴亦凡
    <input type="radio" value="罗志祥" v-model="star">罗志祥
    <input type="radio" value="鹿晗" v-model="star">鹿晗
    <p>{{star}}</p>
    <!-- 选择框中的使用  multiple 多选-->
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>
        蔡徐坤
      </option>
      <option>
        肖战
      </option>
      <option>
        鹿晗
      </option>
    </select>
    <p>{{selected}}</p>
    <select multiple v-model="selectes">
      <option disabled value="">请选择</option>
      <option>
        蔡徐坤
      </option>
      <option>
        肖战
      </option>
      <option>
        鹿晗
      </option>
    </select>
    <p>{{selectes}}</p>
  </div>
  <!-- 修饰符 
    .lazy 把收集单实时收集 改为失去焦点后才开始收集 类比js的input事件和change事件
    .trim 收集保单数据的时候 清楚前后的空格
    .number 收集数据的时候直接转为number类型,如果无法转为正常的数字则保持原来的字符串格式
     -->
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        ipt: '',
        checked: false,
        // 用一个空数组来存放数据
        checkName: [],
        star: '',
        selected: '',
        selectes: []
      }

    }
  })
</script>

</html>